<template>
  <view class="home-header home-panel">
    <!-- 搜索 -->
    <headerSearch></headerSearch>

    <!-- banner -->
    <view class="header-banner">
      <swiper
        class="header-banner--swiper"
        :indicator-dots="swiper.indicatorDots"
        :autoplay="swiper.autoplay"
        :interval="swiper.interval"
        :duration="swiper.duration"
        indicator-active-color="#f54305"
        indicator-color="#d9d9d9"
      >
        <swiper-item v-for="(item,$index) in list" :key="$index">
          <view class="swiper-item">
            <image class="swiper-item--image" :src="item.img_path" mode="widthFix" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 操作 -->
    <view class="header-actions">
      <uiGrid :columnNum="3">
        <uiGridItem boxClass="actions-item">
          <view slot="content">
            <image
              class="grid-item-image actions-item--image"
              src="/static/images/home/zhibo.png"
              mode="widthFix"
            />
            <text class="ui-txt actions-item--text">直播课</text>
          </view>
        </uiGridItem>
        <uiGridItem boxClass="actions-item">
          <navigator url="/pages/activity/index/index" slot="content" hover-class="none">
            <image
              class="grid-item-image actions-item--image"
              src="/static/images/home/huodong.png"
              mode="widthFix"
            />
            <text class="ui-txt actions-item--text">活动行</text>
          </navigator>
        </uiGridItem>
        <uiGridItem boxClass="actions-item">
          <template v-slot:content>
            <navigator url="/pages/ranking/index" hover-class="none">
              <image
                class="grid-item-image actions-item--image"
                src="/static/images/home/paihang.png"
                mode="widthFix"
              />
              <text class="ui-txt actions-item--text">排行榜</text>
            </navigator>
          </template>
        </uiGridItem>
      </uiGrid>
    </view>
  </view>
</template>

<script>
import uiIcon from "@/components/base/icon/index.vue";
import uiGrid from "@/components/base/grid/index.vue";
import uiGridItem from "@/components/base/grid-item/index.vue";

import headerSearch from "@/components/business/header-search/index";

import { loadBannerInfoAPI } from "@/api/home/index.js";
export default {
  name: "homeBanner",
  components: {
    uiIcon,
    uiGridItem,
    uiGrid,
    headerSearch
  },
  "mp-weixin": {
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      styleIsolation: "shared" //  这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
    }
  },
  data() {
    return {
      list: [],
      swiper: {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500
      }
    };
  },
  created() {
    this.loadAppletBannerData();
  },
  mounted() {},
  methods: {
    loadAppletBannerData() {
      loadBannerInfoAPI().then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          return;
        }
        this.list = result;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home-header {
  background-color: #fff;
  margin-top: 0;

  .header-banner {
    padding: 0 30upx;
    .header-banner--swiper {
      display: inline-block;
      width: 690upx;
      height: 264upx;
    }
    .swiper-item {
      display: inline-block;
      width: 690upx;
      height: 264upx;
      .swiper-item--image {
        width: 100%;
      }
    }
  }

  .header-actions {
    padding: 0 30upx;

    .actions-item--image {
      display: block;
      width: 78upx;
      height: 78upx;
      margin: 0 auto;
    }
    .actions-item--text {
      display: block;
      margin-top: 17upx;
    }
  }
  /deep/ .actions-item {
    padding: 34upx 0;
  }
}
</style>
